<template>
  <el-dialog class="public-dialog" title="添加商品" width="1000" :modelValue="modelValue" @close="handleClose" draggable align-center :close-on-click-modal="false">
    <div>
      <XForm ref="form" :fieldList="fieldList" :options="formOption" :formData="formData" :originOption="originOption" @submit="queryTableList"></XForm>

      <vxe-grid v-bind="tableOptions" ref="tableRef" />
    </div>

    <template #footer>
      <el-button @click="handleClose"> 取消 </el-button>
      <el-button type="primary" :loading="loading" @click="submit"> 确认 </el-button>
    </template>
  </el-dialog>
</template>

<script setup lang="jsx">
import { ElMessage } from "element-plus"
import { stockingAnalysisList } from "@/api/plan"

import XForm from "@/components/XForm/index.vue"
const emit = defineEmits(["submit", "handleClose"])
const modelValue = ref(false)
const data = reactive({
  formData: {
    skuRange: { type: "sku", value: "" },
  },
  loading: false,
})
const { formData, loading } = toRefs(data)

const tableRef = ref()

const tableOptions = reactive({
  border: true,
  height: 600,
  showOverflow: false,
  columns: [
    { type: "radio", fixed: "left", width: 40 },
    {
      title: "国家\nASIN",
      width: 140,
      slots: {
        default: ({ row }) => (
          <div>
            <VText title="国家" value={row.site_code} line={1} />
            <VText title="ASIN" value={row.asin} line={1} />
          </div>
        ),
      },
    },
    {
      title: "SKU\n自定义SKU",
      width: 140,
      slots: {
        default: ({ row }) => (
          <div>
            <VText title="SKU" value={row.sku} line={1} type="link" />
            <VText title="自定义SKU" value={row.custom_sku} line={1} />
          </div>
        ),
      },
    },
    {
      title: "商品类目",
      width: 140,
      slots: {
        default: ({ row }) => <VText value={row.product_category_text} line={2} />,
      },
    },
    {
      title: "商品名称",
      width: 140,
      slots: {
        default: ({ row }) => <VText value={row.sku_title} line={2} />,
      },
    },
    {
      title: "活跃状态",
      width: 140,
      slots: {
        default: ({ row }) => <VText value={row.activity_status_text} line={1} />,
      },
    },
    {
      title: "状态",
      width: 140,
      slots: {
        default: ({ row }) => <VText value={row.status_text} line={1} />,
      },
    },
    {
      title: "需要备料\n备料后采购天数",
      width: 140,
      slots: {
        default: ({ row }) => (
          <div>
            <div class="text-red flex items-center">
              <svg-icon icon-class="wan" class="mr-[2px]"></svg-icon>需备料
            </div>
            <VText value={row.plan_asin_purchases.purchase_days} line={1} />
          </div>
        ),
      },
    },
    {
      title: "供应商",
      width: 140,
      slots: {
        default: ({ row }) => <VText value={row.plan_asin_purchases.supplier_name} line={1} />,
      },
    },
  ],
  // data: [],
  pagerConfig: {
    // enabled: true,
    // pageSize: 10
  },
  proxyConfig: {
    // autoLoad: false, // 是否自动加载查询数据
    props: {
      result: "data",
      total: "total",
    },

    ajax: {
      query: ({ page }) => {
        let params = {
          ...formData.value,
          page: page.pageNum,
          page_size: page.pageSize,
        }
        return stockingAnalysisList(params)
      },
    },
  },
})

const queryTableList = () => {
  tableRef.value.commitProxy("reload")
}
const originOption = ref({})
const formOption = ref({ inline: true, option: true })

import { enumGet, getCountry } from "@/api"
onMounted(async () => {
  originOption.value.country = (await getCountry()).data
  const { data } = await enumGet({ name: ["Base.BaseAsinList.IsRequiresStockingEnum"] })
  originOption.value["Base.BaseAsinList.IsRequiresStockingEnum"] = data["Base.BaseAsinList.IsRequiresStockingEnum"]
})

const fieldList = ref([
  {
    field: "site_code",
    type: "select",
    multiple: true,
    collapseTags: true,
    originField: "country",
    options: {
      placeholder: "国家",
    },
    style: { width: "200px" },
  },
  {
    field: "skuRange",
    placeholder: "可批量搜索",
    select: [
      { label: "SKU", value: "sku" },
      { label: "自定义SKU", value: "custom_sku" },
      { label: "ASIN", value: "asin" },
    ],
    style: { width: "200px" },
  },
  {
    field: "is_requires_stocking",
    type: "select",
    originField: "Base.BaseAsinList.IsRequiresStockingEnum",
    options: {
      placeholder: "是否备料",
    },
    style: { width: "120px" },
  },
])
const submit = () => {
  let radioRow = tableRef.value.getRadioRecord()
  if (!radioRow) {
    return ElMessage({ showClose: true, message: "请选择一条数据！", type: "warning" })
  }
  console.log(radioRow)
  emit("submit", radioRow)
  handleClose()
}
const handleClose = () => {
  modelValue.value = false
}
const open = (params = {}) => {
  modelValue.value = true
  // console.log(123);
  // console.log(params);
  // setTimeout(() => {
  //   initEcharts()
  // }, 1000)
}

defineExpose({
  open,
})
</script>
<style lang="scss" scoped></style>
